<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="carousel in carouselImg" :key="carousel.id">
      <router-link
        :to="{ name: 'Passage', params: { id: carousel.passageId } }"
      >
        <img
          :src="'/fileServer' + carousel.filePath"
          :alt="carousel.fileName"
          class="slider-img"
          style="width: 100%; height: 100%"
        />
      </router-link>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

const OK = 200;
const carouselImg = ref([]);

const getCarouselList = async (typeId, pageSize) => {
  try {
    const res = await axios.get("/api/files", {
      params: {
        fileTypeId: typeId,
        pageNum: 1,
        pageSize: pageSize,
      },
    });
    if (res.data.code === OK) {
      carouselImg.value = res.data.data.list;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error("获取轮播图列表失败:", error);
  }
};

// const refreshPasagePage = () => {
//   getCarouselList(4, 6);
// };

onMounted(() => {
  getCarouselList(4, 6);
});
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 400px;
  margin: 0;
}

.slider-img {
  cursor: pointer;
  width: 1196px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
